<%@ page import="com.iweb.constant.UserAction" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <base href="<%=basePath%>">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta charset="utf-8"/>
  <title>用户列表</title>

  <meta name="description" content=""/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

  <!-- bootstrap & fontawesome -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <!-- text fonts -->
  <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css"/>
  <!-- ace styles -->
  <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
  <link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
  <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>
  <!-- ace settings handler -->
  <script src="assets/js/ace-extra.min.js"></script>
</head>

<body class="no-skin">
<%@include file="navbar.jsp" %>

<div class="main-container ace-save-state" id="main-container">
  <script type="text/javascript">
    try {
      ace.settings.loadState('main-container')
    } catch (e) {
    }
  </script>

  <%@include file="siderbar.jsp" %>

  <div class="main-content">
    <div class="main-content-inner">
      <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
          <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">Home</a>
          </li>

          <li>
            <a href="#">Other Pages</a>
          </li>
          <li class="active">Blank Page</li>
        </ul><!-- /.breadcrumb -->

        <div class="nav-search" id="nav-search">
          <form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                         autocomplete="off"/>
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
          </form>
        </div><!-- /.nav-search -->
      </div>

      <div class="page-content">
        <div class="ace-settings-container" id="ace-settings-container">
          <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
            <i class="ace-icon fa fa-cog bigger-130"></i>
          </div>

          <div class="ace-settings-box clearfix" id="ace-settings-box">
            <div class="pull-left width-50">
              <div class="ace-settings-item">
                <div class="pull-left">
                  <select id="skin-colorpicker" class="hide">
                    <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                  </select>
                </div>
                <span>&nbsp; Choose Skin</span>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off"/>
                <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-add-container">
                  Inside
                  <b>.container</b>
                </label>
              </div>
            </div><!-- /.pull-left -->

            <div class="pull-left width-50">
              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off"/>
                <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off"/>
                <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off"/>
                <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
              </div>
            </div><!-- /.pull-left -->
          </div><!-- /.ace-settings-box -->
        </div><!-- /.ace-settings-container -->

        <div class="row">
          <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <%--            搜索表单--%>
            <div class="panel panel-info">
              <div class="panel-heading">
                <h3 class="panel-title">查询</h3>
              </div>
              <div class="panel-body">
                <form id="search-form" action="user.do" method="post" class="form-inline" role="form">
                  <input type="hidden" name="action" value="<%=UserAction.LIST%>">
                  <input type="hidden" name="pageIndex">
                  <div class="form-group">
                    <label>姓名</label>
                    <input type="text" class="form-control" name="userName" placeholder="请输入姓名..."
                           value="${requestScope.pager.params.userName}">
                  </div>
                  <div class="form-group">
                    <label>手机号码</label>
                    <input type="text" class="form-control" name="mobile" placeholder="请输入手机号码..."
                           value="${requestScope.pager.params.mobile}">
                  </div>
                  <div class="form-group">
                    <label>用户类型</label>
                    <select name="type">
                      <option value="1">系统管理员</option>
                      <option value="0">商城会员</option>
                    </select>
                  </div>
                  <button type="submit" class="btn btn-primary btn-sm">查询</button>
                </form>
              </div>
            </div>
            <%--        显示用户列表--%>

            <table class="table table-bordered table-hover">
              <thead>
              <tr>
                <th>序号</th>
                <th>登录名</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>手机号</th>
                <th>会员类型</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <c:forEach items="${requestScope.pager.list}" var="user" varStatus="status">
                <tr>
                  <td>${status.index+1}</td>
                  <td>${user.loginName}</td>
                  <td>${user.userName}</td>
                  <td>${user.email}</td>
                  <td>${user.mobile}</td>
                  <td>${user.type eq 1?"系统管理员":"商城会员"}</td>
                  <td>
                    <div class="hidden-sm hidden-xs btn-group">
                      <a class="btn btn-xs btn-info" href="user.do?action=<%=UserAction.MODIFY%>&id=${user.id}">
                        <i class="ace-icon fa fa-pencil bigger-120"></i>
                      </a>
                      <a class="btn btn-xs btn-danger" href="user.do?action=<%=UserAction.REMOVE%>&id=${user.id}">
                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                      </a>
                    </div>
                  </td>
                </tr>
              </c:forEach>
              </tbody>
            </table>
            <div class="row">
              <%--              显示分页等相关信息--%>
              <div class="col-sm-6">
                当前第${requestScope.pager.pageIndex}页,每页显示${requestScope.pager.pageSize}条,
                共计${requestScope.pager.totalPages}页,合计总数据${requestScope.pager.totalRows}条
              </div>
              <%--  显示分页按钮--%>
              <div class="col-sm-6">
                <div class="btn-group">
                  <a class="btn btn-light btn-sm" href="user.do?action=list">首页</a>
                  <a class="btn btn-light btn-sm" href="javascript:void(0);" onclick="prevPage(this)">上一页</a>
                  <a class="btn btn-light btn-sm" href="javascript:void(0);" onclick="nextPage(this)">下一页</a>
                  <a class="btn btn-light btn-sm" href="user.do?action=list&pageIndex=${requestScope.pager.totalPages}">尾页</a>
                </div>
              </div>
            </div>
            <!-- PAGE CONTENT ENDS -->
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.page-content -->
    </div>
  </div><!-- /.main-content -->

  <%@include file="footer.jsp" %>
</div><!-- /.main-container -->

<script src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
  if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script>
  let pageIndex = ${requestScope.pager.pageIndex};

  // 给用户类型赋值
  $(function () {
    $("[name=type]").val(${requestScope.pager.params.type});
  });

  function prevPage(obj) {
    if (pageIndex > 1) {
      // 当前页码减1
      $("[name=pageIndex]").val(pageIndex - 1);
      $(obj).removeAttr("disabled");
      // 提交查询表单
      $("#search-form").submit();
    } else {
      // 设置禁用状态
      $(obj).attr("disabled", "");
    }
  }

  /**
   * 下一页按钮
   * @param obj
   */
  function nextPage(obj) {
    if (pageIndex < ${requestScope.pager.totalPages}) {
      // 当前页码加1
      $("[name=pageIndex]").val(pageIndex + 1);
      $(obj).removeAttr("disabled");
      // 提交查询表单
      $("#search-form").submit();
    } else {
      // 设置禁用状态
      $(obj).attr("disabled", "");
    }
  }
</script>
</body>
</html>
